<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script>
    /*
      响应式的俩个要素：
      1.触发者
      2.响应者
    */
   // 定义一个变量，触发者
   const obj = {name:'孙悟空', age: 18}
   // 定义一个函数，响应者
    function effect() {
      // app 相当于 document.querySelector('#app')
      app.innerHTML = obj.name
    }
    effect()
    setTimeout(() => {
      obj.name = '猪八戒'
      // 数据改变，手动触发一下函数
      effect()
    },1000)
  </script>
</body>
</html>